<template>
  <el-card class="box-card margin-200 " v-loading="loading" element-loading-text="拼命加载中">
    <div slot="header" class="clearfix">
      <el-row>
        <el-col :md="8">
          <el-input placeholder="检索：节点名称" v-model="filterText"> </el-input>
        </el-col>
        <el-col :md="16" :xs="20" :sm="20" class="text-right">
          <el-button-group>
            <el-button type='primary' icon="plus" @click="handleADD">添加一级菜单</el-button>
            <el-button type='warning' class="ti-exchange-vertical" @click="handleSort">节点排序</el-button>
          </el-button-group>
        </el-col>
      </el-row>
    </div>
    <div v-bind:style="{ 'min-height': _PageHeight+'px'}">
      <el-tree :data="tableData" :expand-on-click-node="false" :default-expanded-keys="['59b7e9807fd84317e8c4f722', '59b7e9807fd84317e8c4f723','59bfd3683c1bb119a8cfa3d0' ]" :props="defaultProps" node-key="_id" highlight-current :render-content="renderContent" ref="tree" :filter-node-method="filterNode">
      </el-tree>
    </div>
    <jiedianAdd :dialogStatus="dialog" :dhid="dhid" :is_exit="is_exit" @CB-dialogStatus="CB_dialogStatus"></jiedianAdd>
  </el-card>
</template>
<script>
import jiedianAdd from './navaigation_add'

export default {
  //切换keep时，触发该方法
  activated: function() {
    this.getData();
  },
  data() {
    return {
      loading: false,
      tableData: [],
      dialog: false,
      defaultProps: {
        children: 'children',
        label: 'menu_name'
      },
      dhid: '',
      filterText: '',
      sortstr: "",
      sortData: [],
      is_exit: false
    }
  },
  watch: {
    'filterText': function(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.title.indexOf(value) !== -1;
    },
    //添加
    handleADD() {
      this.dialog = true
    },
    //节点排序
    handleSort() {},
    //获取主数据
    async getData() {
      this.loading = true
      let userData = await this.fetch('/menu/treeselect', {}, this.$store.getters.Request_Head, 'POST')
      if (userData.status.code !== 1001) {
        this.$message.error(userData.data ? userData.data : userData.status.title)
      } else {
        this.loading = false
        this.tableData = userData.data
      }
    },
    CB_dialogStatus(val) {
      if (val == 1) {
        this.getData()
      }
      this.is_exit = false
      this.dhid = ''
      this.dialog = false
    },
    //重新渲染节点
    renderContent: function(createElement, {
      node,
      data,
      store
    }) {
      var self = this;
      return createElement('span', [
        createElement('span', node.label),
        createElement('span', {
          attrs: {
            class: 'pull-right margin-right-20'
          }
        }, [
          createElement('div', {
            attrs: {
              class: "el-button-group"
            }
          }, [createElement('el-button', {
              attrs: {
                size: "small",
                type: 'info',
                icon: 'plus'
              },
              on: {
                click: function() {
                  self.dhid = data
                  self.dialog = true
                  self.is_exit = false;
                }
              }
            }, "添加子节点"),
            createElement('el-button', {
              attrs: {
                size: "small",
                type: 'primary',
                icon: 'edit'
              },
              on: {
                click: function() {
                  self.dhid = data
                  self.is_exit = true
                  self.dialog = true
                }
              }
            }, "编辑"),
            createElement('el-button', {
              attrs: {
                size: "small",
                type: 'danger',
                icon: 'delete2'
              },
              on: {
                click: function() {
                  self.$confirm('删除后不可恢复，确定要删除吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {
                    self.fetch('/menu/deletes', {
                      _id: data._id
                    }, self.$store.getters.Request_Head, 'POST').then((tableData) => {
                      console.log(tableData)
                      if (tableData.status.code !== 1001) {
                        self.$message.error(tableData.data ? tableData.data : tableData.status.title)
                      } else {
                        self.$message({
                          type: 'success',
                          message: '删除成功'
                        })
                        self.getData()
                      }
                    }).catch(() => {
                      self.$emit('API-ERR');
                    })
                  }).catch(() => {})
                }
              }
            }, "删除"),
          ]),
        ]),
        //显示节点排序
        createElement('span', {
          attrs: {
            class: 'pull-right margin-right-20 bord-lft pad-lft',
            style: 'width:80px;'
          }
        }, [
          createElement('el-input', {
            attrs: {
              value: data.sort,
              size: 'small'
            },
            on: {
              change: function(val) {
                data.sort = val
              }
            }
          })
        ]),
        //显示路由名称
        createElement('span', {
          attrs: {
            class: 'pull-right margin-right-20 bord-lft pad-lft',
            style: 'width:200px'
          }
        }, data.router_name),
        //显示接口名称
        createElement('span', {
          attrs: {
            class: 'pull-right margin-right-20 bord-lft pad-lft',
            style: 'width:200px'
          }
        }, data.api_name)
      ]);
    }
  },
  components: {
    jiedianAdd
  }
}

</script>
<style>
span.is-leaf {
  height: 36px;
  line-height: 36px;
  width: 25px;
  background: url('../../assets/join.gif') no-repeat;
  margin: 0px;
}

.el-tree-node {
  background-color: #e9e9e9;
  margin-bottom: 1px;
}

.el-tree-node__content {
  background-color: #e9e9e9;
  margin-bottom: 1px;
}

.el-tree-node .is-expanded {
  background-color: #e9e9e9;
  margin-bottom: 0px;
}

.el-tree-node__content {
  background-color: #FFFFFF
}

.margin-right-20 {
  margin-right: 20px;
}

</style>
